import React from 'react'
import { 
  createStore,
  bindActionCreators,
 } from '../redux'
// import { 
//   createStore,
//   bindActionCreators,
//  } from 'redux'

const ADD = 'ADD'
const MINUS = 'MINUS'
let initState = { number: 0 }

const reducer = (state = initState, action) => {
  switch (action.type) {
    case ADD:
      return { number: state.number + 1 }
    case MINUS:
      return { number: state.number - 1 }
    default:
      return state
  }
}

const store = createStore(reducer)

// 创建 action 的函数
function add() {
  return { type: ADD }
}

// 创建 action 的函数
function minus() {
  return {type: MINUS}
}

const actionCreators = {
  add,
  minus
}

// boundActionCreators { add: () => dispatch({action: ADD}), minus: () => dispatch({action: MINUS}) }
const boundActionCreators = bindActionCreators(actionCreators, store.dispatch)

class Counter1 extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      number: store.getState().number, // 把仓库状态的 number 传递给组件
    }
  }
  componentDidMount() {
    // 当仓库的状态发生变化后 会自动执行订阅函数
    // 并返回一个取消订阅的函数
    this.unsubscribe = store.subscribe(() => { // 保存一个订阅函数
      // 当仓库状态发生变化时 执行 this.setState 函数更新组件的状态
      this.setState({
        number: store.getState().number, // 使用仓库状态的 number 覆盖组件的 number
      })
    })
  }

  // 当组件卸载的时候执行
  componentWillUnmount() {
    this.unsubscribe() // 取消订阅
  }
  render() {
    return <div>
      <p>{this.state.number}</p>
      <button onClick={boundActionCreators.add}>+</button>
      <button onClick={boundActionCreators.minus}>-</button>
    </div>
  }
}
export default Counter1
